<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .child {
            width: 100%;
            height: 50px;
            background-color: rgb(194, 221, 194);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-bottom: 2px solid rosybrown;
            padding: 0 20px 0 60px;
        }

        .todo {
            width: 100%;
            height: 700px;
        }

        input {
            width: 80%;
            height: 40px;
            margin: auto;
        }

        span {
            position: absolute;
            display: none;
        }

        .box {
            position: relative;
        }

        .true p {
            text-decoration: line-through;
        }
    </style>
    <script src="../day6jquery/jquery3.5.min.js"></script>
</head>

<body>
    <div class="todo">
        <div><input placeholder="请输入" /><button>添加</button></div>
        <div class="box">
            <!-- <div class="child">
                <span>✔</span>
                <p>v </p>
                <div>x</div>
            </div> -->
        </div>
    </div>
    <script>
        let ipt = $('input');
        let box = $('.box');
        let btn = $('button')
        var arr = [];
        let st = localStorage.getItem('arr');
        if(st){
            arr = JSON.parse(st)
        }
        init()
        function init() {
            box.empty()
            for (var i = 0; i < arr.length; i++) {
                box.append('<div class="child" id="item' + i + '">' +
                    ' <span class="span' + i + '">✔</span>' +
                    '<p  onclick="change(' + i + ')">' + arr[i] + '</p>' +
                    '<div onclick="dele(' + i + ')">x</div>' +
                    '</div>');
                let value = ipt.val()
                // JSON.stringify(localStorage.setItem(arr));
            //    localStorage.setItem('arr',arr);
               console.log(arr[i]);
            }
        }
        function dele(index) {
            arr.splice(index, 1)
            localStorage.setItem('arr', JSON.stringify(arr))
            console.log('==>',index);
            init()
        }
        function change(index) {
            let span = $('.span' + index);
            let item = $('#item' + index)
            let str = span.css('display');
            console.log(str);
            if (str == 'none') {
                span.css("display", "inline")
                item.attr('class', 'item true')
                item.css({
                    "background-color": "#9e9999",
                    'display': 'flex',
                    'justifyContent': 'space-between'
                });

            } else {
                span.css("display", "none")
                item.attr('class', 'item')
                item.css("background-color", "#808080");
            }
        }

        function add() {
            let value = ipt.val()
            if (!value) {
                return
            }
            if (arr.indexOf(value) !== -1) {
                alert('任务已存在');
                return
            }
            arr.push(value);
            localStorage.setItem('arr', JSON.stringify(arr))
            init();
            ipt.val('')
        }
        btn.click(add)
        ipt.keydown(function (e) {
            if (e.keyCode == 13) {
                add()
            }
        })

    </script>
</body>

</html>